import React, {useEffect, useState} from "react";
import {View, ScrollView} from "native-base";
import {SearchInput} from "./searchInput";
import {SearchRadicals} from "./searchRadicals";
import {RadicalsItem} from "./radicalsItem";
import {SearchYear} from "./searchYear";
import {StyleSheet, Dimensions} from 'react-native';
import Include from "../../commponents/sealCutting/introduce";
import {CommonSearch} from "./commonSearch";
import {AncientSeal} from "../../commponents/sealCutting/ancientSeal";
import {Sect} from "../../commponents/sealCutting/sect";
import {Dictionaries} from "../../commponents/sealCutting/dictionaries";
const {height} = Dimensions.get('window');

export const SealCuttings = ({navigation}) => {
    const [ipt, setIpt] = useState('');
    const [tempIpt,setTempIpt] = useState('');
    const [show, setShow] = useState(false);
    const [isSearch,setIsSearch] = useState(false);
    const [time, setTime] = useState('全部');
    function _searchPressingEnter(){
        setIsSearch(true);
        setShow(false);
        setTempIpt(ipt);
    }

    return (
        <View style={styles.main}>
            {show && <RadicalsItem setShow={setShow} setIpt={setIpt} _searchPressingEnter={_searchPressingEnter}/>}
            <SearchInput ipt={ipt} setIpt={setIpt} _searchPressingEnter={_searchPressingEnter}/>
            <View
                style={styles.bigVessels}
                automaticallyAdjustContentInsets={false}
                showsVerticalScrollIndicator={false}
                scrollsToTop={true}
            >
                <View style={styles.vessels}>
                    {/*分割线*/}
                    <View style={styles.line}/>
                    {/*偏旁搜索*/}
                    <SearchRadicals setShow={setShow}/>
                    {/*年代搜索*/}
                    <SearchYear setTime={setTime} _searchPressingEnter={_searchPressingEnter}/>
                    {/*三种查询方式*/}
                    {
                        isSearch &&
                        <View style={styles.threeSearch}>
                            <View style={styles.threeView}>
                                <AncientSeal tempIpt={tempIpt} navigation={navigation}/>
                            </View>
                            <View style={styles.threeView}>
                                <Sect tempIpt={tempIpt} navigation={navigation}/>
                            </View>
                            <View style={styles.threeView}>
                                <Dictionaries tempIpt={tempIpt} navigation={navigation}/>
                            </View>
                        </View>
                    }
                    {/*搜索介绍*/}
                    {!isSearch && <Include/>}
                    {/*搜索信息展示*/}
                    {isSearch && <CommonSearch tempIpt={tempIpt} time={time} navigation={navigation}/>}
                </View>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    main: {
        position: 'relative',
        zIndex: 0,
        backgroundColor: '#fff'
    },
    bigVessels: {
        height: height - 60,
    },
    line: {
        width: '100%',
        height: 1,
        backgroundColor: '#f2f2f2',
        marginBottom: 10,
        marginTop: 10,
    },
    vessels: {
        width: '100%',
        paddingLeft: 20,
        paddingRight: 20,
    },
    fixed: {
        backgroundColor: 'rgba(0,0,0,.3)',
        justifyContent:'center',
        alignItems:'center',
        position:'absolute',
        height:Dimensions.get('window').height,
        width:Dimensions.get('window').width,
        zIndex:10,
    },
    threeSearch: {
        backgroundColor: '#fff',
        width: '100%',
        height: 80,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 20,
    },
    threeView: {
        backgroundColor: '#f2f2f2',
        height: '100%',
        width: '30%',
        borderRadius: 10,
    },
})